<template>
  <el-row type="flex">
    <el-col class="right" :span="12">
      <img src="@/assets/img/login_img.png" alt="" srcset="" />
    </el-col>
    <el-col :span="12">
      <el-card>
        <img class="logo" src="@/assets/img/logo.png" alt="" srcset="" />
        <h3 class="title">电商后台系统</h3>
        <!-- <el-form :model="user" :rules="rule" ref="userForm"> -->
        <el-form :model="user" :rules="$rules.user" ref="userForm">
          <el-form-item prop="username">
            <el-input
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
              v-model="user.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              placeholder="请输入密码"
              v-model="user.password"
            >
              <template #prefix>
                <i class="el-input__icon el-icon-lock"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="login-btn" type="primary" @click="doLogin()">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      // rule: {
      //   username: [
      //     { required: true, message: "登录名不能为空", trigger: "blur" },
      //     { min: 3, message: "登录名长度必须大于3位", trigger: "blur" },
      //   ],
      //   password: [
      //     { required: true, message: "密码不能为空", trigger: "blur" },
      //     { min: 3, message: "密码长度必须大于3位", trigger: "blur" },
      //   ],
      // },
    };
  },
  methods:{
    async doLogin(){
      try {
        await this.$refs.userForm.validate()
        // console.log("校验成功")
        // console.log("登录")
        let { data,meta } = await this.$api.userLogin(this.user);
        console.log(data)
        if(meta.status>=300){
          this.$message.error(meta.msg)
          return;
        }
        this.$router.push({
          name:"home"
        })
        this.$message.success(meta.msg)
      } catch (error) {
        console.log("校验失败",error)
        // this.$message.error("登录失败")
      }

    }
  }
};
</script>

<style lang="less" scoped>
.el-row {
  height: 100%;
  background-color: @bc;
}
.el-col {
  align-self: center;
  padding-left: 60px;
}
.el-col.right {
  text-align: right;
  padding-left: 0px;
  padding-right: 60px;
}
.el-card {
  display: inline-block;
  width: 400px;
  // min-height: 400px;
  position: relative;
  overflow: unset;
  // 局部变量
  @wh: 140px;
  .logo {
    position: absolute;
    background-color: white;
    width: @wh;
    height: @wh;
    border-radius: 50%;
    padding: (@wh / 20);
    box-sizing: border-box;
    border: 6px solid @bc;
    top: (-@wh / 2);
    left: 50%;
    transform: translate((-@wh / 2), 0);
  }
  .title {
    margin: 0px;
    margin-top: (@wh / 2);
    text-align: center;
  }
}
.el-form {
  margin-top: 40px;
  .login-btn {
    width: 100%;
  }
}
</style>